<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>联系人分类汇总报表</title>
  <style>
    #pieChartDiv {
        width: 900px;
        height: 600px;
        margin: 30px auto;
        box-shadow: 0 0 20px rgba(0,0,0,0.1);
        border-radius: 8px;
        background-color: #fff;
    }
    h2 {
        text-align: center;
        margin-top: 30px;
        color: #333;
        font-family: 'Microsoft YaHei', sans-serif;
        font-size: 24px;
    }
    .chart-container {
        padding: 20px;
    }
  </style>
</head>
<body>

<h2>联系人分类分布分析</h2>
<div class="chart-container">
  <div id="pieChartDiv"></div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
  /*<![CDATA[*/
  // 获取后端传递的数据
  const rawData = [[${dataCountByCategory}]];

  // 准备饼图数据
  const pieData = [];
  const categories = [];
  let total = 0;

  // 处理数据
  rawData.forEach(item => {
      const key = Object.keys(item)[0];
      const name = item[Object.keys(item)[1]];
      const value = item[key];

      categories.push(name);
      pieData.push({
          name: name,
          value: value
      });
      total += value;
  });

  // 初始化 ECharts 实例
  const pieChart = echarts.init(document.getElementById('pieChartDiv'));

  // 配置项
  const pieOption = {
      title: {
          text: '联系人分类占比分析',
          subtext: `总计: ${total} 位联系人`,
          left: 'center',
          textStyle: {
              fontSize: 18,
              fontWeight: 'bold',
              color: '#333'
          },
          subtextStyle: {
              color: '#666',
              fontSize: 14
          }
      },
      tooltip: {
          trigger: 'item',
          formatter: function(params) {
              const percent = params.percent;
              const value = params.value;
              return `
                  <div style="font-weight:bold">${params.name}</div>
                  <div>数量: <span style="color:#5470C6;font-weight:bold">${value}</span></div>
                  <div>占比: <span style="color:#EE6666;font-weight:bold">${percent}%</span></div>
                  <div>占总比: <span style="color:#91CC75;font-weight:bold">${(value/total*100).toFixed(1)}%</span></div>
              `;
          }
      },
      legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          textStyle: {
              color: '#666'
          },
          formatter: function(name) {
              const data = pieData.find(item => item.name === name);
              return `${name} (${data.value})`;
          }
      },
      series: [
          {
              name: '联系人分类',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['45%', '55%'],
              avoidLabelOverlap: false,
              itemStyle: {
                  borderRadius: 5,
                  borderColor: '#fff',
                  borderWidth: 2
              },
              label: {
                  show: true,
                  formatter: function(params) {
                      return `${params.name}\n${params.percent}%`;
                  },
                  color: '#333',
                  fontWeight: 'bold'
              },
              labelLine: {
                  show: true,
                  length: 10,
                  length2: 15
              },
              emphasis: {
                  label: {
                      show: true,
                      fontSize: '16',
                      fontWeight: 'bold'
                  },
                  itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              },
              data: pieData.sort(function(a, b) {
                  return b.value - a.value;
              }),
              roseType: 'radius'
          }
      ],
      color: [
          '#5470C6', '#91CC75', '#FAC858', '#EE6666',
          '#73C0DE', '#3BA272', '#FC8452', '#9A60B4',
          '#EA7CCC', '#75C0E0', '#FF9F7F', '#6E7074'
      ],
      toolbox: {
          feature: {
              saveAsImage: {
                  title: '保存为图片',
                  pixelRatio: 2
              },
              dataView: {
                  title: '数据视图',
                  readOnly: true,
                  lang: ['数据视图', '关闭', '刷新'],
                  optionToContent: function(opt) {
                      let table = '<table style="width:100%;text-align:center"><tbody><tr><th>分类</th><th>数量</th><th>占比</th></tr>';
                      opt.series[0].data.forEach(item => {
                          table += `<tr>
                              <td>${item.name}</td>
                              <td>${item.value}</td>
                              <td>${(item.value/total*100).toFixed(1)}%</td>
                          </tr>`;
                      });
                      table += `<tr style="font-weight:bold">
                          <td>总计</td>
                          <td>${total}</td>
                          <td>100%</td>
                      </tr></tbody></table>`;
                      return table;
                  }
              }
          },
          right: 20,
          top: 20
      }
  };

  // 使用配置项
  pieChart.setOption(pieOption);

  // 响应式调整
  window.addEventListener('resize', function() {
      pieChart.resize();
  });
  /*]]>*/
</script>
</body>
</html>